<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE  >
<html>
<head>
<meta charset=UTF-8/>
<title>登陆界面</title>
    <script src="js/jquery-3.2.1.min.js"></script>
</head>

<body>
<form id="form1">
用户名:<input type="text"  name="username" id="username"/><br>
密码:<input type="text" name="password"  id="password"/><br>
<input type="button"  value="提交" onclick="jsonClick()"/>
</form>
<div id="show"></div>
<script>
    function jsonClick(){
        $("#show").hide();

//        使用post函数
//        $.post("json", $("#form1").serializeArray(),
//            function (data, statusText) {
//                $("#show").height(80)
//                    .width(240)
//                    .empty();
//                for( var prop in data ){
//                    $("#show").append(prop + "-->" + data[prop] + "<br/>");
//                }
//                $("#show").show(600);
//            });

//      使用ajax函数
        $.ajax({
            type : "post",
            url : "json",
            dataType : "json",
            data : $("#form1").serializeArray(),
            success : function (data) {
                $("#show").height(80)
                    .width(240)
                    .empty();
                for( var prop in data ){
                    $("#show").append(prop + "-->" + data[prop] + "<br/>");
                }
                $("#show").show(600);
            }
        });
    }
</script>

</body>
</html>